<template>
  <div>
    <div class='crumbs'>
      <el-breadcrumb separator='/'>
        <el-breadcrumb-item><i class='el-icon-document'></i> GCP项目</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class='container'>
      <!-- 搜索 -->
      <div style='margin-bottom: 20px'>
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          style='width: 250px;'
          v-model="input"
        >
        </el-input>
        <el-select
          v-model="state"
          placeholder="请选择活动区域"
          style='width: 150px; margin: 0 15px'
        >
          <el-option
            label="全部"
            value="0"
          ></el-option>
          <el-option
            label="待审核"
            value="1"
          ></el-option>
          <el-option
            label="审核不通过"
            value="2"
          ></el-option>
        </el-select>
        <el-button type='primary'>搜索</el-button>
      </div>
      <!-- 表格 -->
      <el-table
        :data='list'
        border
        style='width: 100%; font-size: 15px'
      >
        <el-table-column
          prop='name'
          label='项目名称'
        ></el-table-column>
        <el-table-column
          prop='date'
          label='申请时间'
        ></el-table-column>
        <el-table-column
          prop='state'
          label='状态'
        ></el-table-column>
        <el-table-column label='操作'>
          <template slot-scope="scope">
            <el-button
              type='text'
              size="mini"
              @click="handleLook(scope.$index, scope.row)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style='margin-top: 15px'>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { gcpAPI } from '@/api';

export default {
    name: 'gcp',
    data() {
        return {
            input: '', // 查询内容
            state: '全部', // 查询状态
            currentPage: 2, // 前往几页
            list: []
        };
    },
    created() {
        this.getGcp();
    },
    methods: {
        async getGcp() {
            const res = await gcpAPI();
            this.list = res.data;
        },
        // 查看事件
        handleLook(index, obj) {},
        // 每页几条
        handleSizeChange(val) {},
        // 选中哪页
        handleCurrentChange(val) {}
    }
};
</script>

<style scoped>
</style>
